<template>
  <div class="OnlineOrder">
    <div>
      <h3>订单管理</h3>
    </div>
    <div class="formArea">
      <el-form ref="form" :model="BindForm" class="ele-form" label-width="100px" label-position="left">
        <el-form-item label="订单搜索:">
          <el-col :span="2">
            <el-select v-model="BindForm.type" clearable filterable @change="changeType">
              <el-option value="0" label="手机号" />
              <el-option value="1" label="订单号" />
            </el-select>
          </el-col>
          <el-col :span="6" style="margin-left:12px;">
            <el-input
              v-if="BindForm.type == '0'"
              v-model="BindForm.phone"
              class="ele-input"
              placeholder="手机号"
            />
            <el-input v-else-if="BindForm.type == '1'" v-model="BindForm.orderSn" class="ele-input" placeholder="订单号" />
          </el-col>
        </el-form-item>
        <el-form-item prop="allCity" label="地区:">
          <el-col :span="9" style="align-items: center;display: flex;">
            <city-select ref="citySelect" v-model="BindForm.address" style="margin-left: 0" :is-hide="isHide" @change="changedAddress" />
          </el-col>
        </el-form-item>
        <el-form-item label="查询时段:">
          <el-col :span="24">
            <el-date-picker
              v-model="BindForm.time"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="center"
              clearable
              value-format="yyyy-MM-dd HH:mm:ss"
              format="yyyy-MM-dd HH:mm:ss"
            />
            <el-button plain style="margin-left:10px" @click="setWeek">最近七天</el-button>
            <el-button plain @click="setMonth">最近一个月</el-button>
          </el-col>
          <!--          <div class="el-area">
            <el-date-picker
              v-model="formData.startTime"
              type="datetime"
              placeholder="开始时间"
              default-time="12:00:00"
            />&nbsp;&nbsp;~&nbsp;&nbsp;
            <el-date-picker
              v-model="formData.endTime"
              type="datetime"
              placeholder="结束时间"
              default-time="12:00:00"
            />
            <el-button
              size="mini"
              plain
              class="maringleft"
              @click="getTimeWeek"
            >最近七天</el-button>
            <el-button
              size="mini"
              plain
              @click="getTimeMonth"
            >最近三十天</el-button>
          </div>-->
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchLoading">筛选</el-button>
          <el-button type="info" @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--    <div class="form-seach">
      <el-form :model="formData" class="ele-form">
        <el-form-item label="订单搜索:">
          <el-col :span="4">
            <el-select v-model="formData.type">
              <el-option value="0" label="手机号" />
              <el-option value="1" label="订单号" />
            </el-select>
          </el-col>
          <el-col :span="6" class="maringleft">
            <el-input
              v-model="formData.phone"
              :placeholder="
                formData.type == '0'
                  ? '手机号'
                  : formData.type == '1'
                    ? '订单号'
                    : ''
              "
            />
          </el-col>
        </el-form-item>
        <el-form-item label="城市:">
          <city-select ref="citySelect" v-model="formData.address" :is-hide="isHide" style="margin-left: 0" @change="changedAddress" />
        </el-form-item>
        <el-form-item label="查询时段:">
          <div class="el-area">
            <el-date-picker
              v-model="formData.startTime"
              type="datetime"
              placeholder="开始时间"
              default-time="12:00:00"
            />&nbsp;&nbsp;~&nbsp;&nbsp;
            <el-date-picker
              v-model="formData.endTime"
              type="datetime"
              placeholder="结束时间"
              default-time="12:00:00"
            />
            <el-button
              size="mini"
              plain
              class="maringleft"
              @click="getTimeWeek"
            >最近七天</el-button>
            <el-button
              size="mini"
              plain
              @click="getTimeMonth"
            >最近三十天</el-button>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="el&#45;&#45;button" @click="searchOrder">
            筛选
          </el-button>
        </el-form-item>
      </el-form>
    </div>-->
    <div class="butList">
      <el-radio-group v-model="BindForm.state" @change="searchLoading">
        <el-radio-button label="">全部订单</el-radio-button>
        <el-radio-button label="0">待付款</el-radio-button>
        <el-radio-button label="1">待预约</el-radio-button>
        <el-radio-button label="2">待接单</el-radio-button>
        <el-radio-button label="3">待服务</el-radio-button>
        <el-radio-button label="4">服务中</el-radio-button>
        <el-radio-button label="5">已完成</el-radio-button>
        <el-radio-button label="8">超时未服务</el-radio-button>
        <el-radio-button label="7">已关闭</el-radio-button>
      </el-radio-group>
    </div>
    <!--    <div style="margin-top:40px;">
      <el-radio-group v-model="radio3">
        <el-radio-button label="">全部订单</el-radio-button>
        <el-radio-button label="notPay">待付款</el-radio-button>
        <el-radio-button label="notAppointment">待预约</el-radio-button>
        <el-radio-button label="notService">待服务</el-radio-button>
        <el-radio-button label="finished">已完成</el-radio-button>
        <el-radio-button label="overtime">超时未服务</el-radio-button>
        <el-radio-button label="closed">已关闭</el-radio-button>
      </el-radio-group>
    </div>-->
    <div style="width: 100%;margin-top:40px;">
      <el-table v-loading="loading" :data="Bindata" element-loading-text="正在查询中。。。">
        <el-table-column prop="orderSn" label="订单号" />
        <el-table-column prop="userName" label="买家" />
        <el-table-column prop="mobile" label="手机号码" />
        <el-table-column prop="serviceName" label="服务" />
        <el-table-column prop="city" label="城市" />
        <el-table-column prop="payType" label="付款方式/金额">
          <template slot-scope="scope">
            <span v-if="scope.row.payType=='WEIXIN'">微信</span>
            <span v-else-if="scope.row.payType == 'WEIXINPAYSCORE'">支付宝</span>
            <span v-else-if="scope.row.payType == 'ALIPAY'">支付宝</span>
          </template>
        </el-table-column>
        <el-table-column prop="doctorName" label="医生" />
        <el-table-column prop="stat" label="订单状态">
          <template slot-scope="scope">
            <span v-if="scope.row.stat==0">待付款</span>
            <span v-if="scope.row.stat==1">待预约</span>
            <span v-if="scope.row.stat==2">待接单</span>
            <span v-if="scope.row.stat==3">待服务</span>
            <span v-if="scope.row.stat==4">服务中</span>
            <span v-if="scope.row.stat==5">已完成</span>
            <span v-if="scope.row.stat==8">超时未服务</span>
            <span v-if="scope.row.stat==7">已关闭</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="showDetail(scope.row)"
            >查看详情</el-button>
          </template>

        </el-table-column>
      </el-table>
    </div>
    <div class="foot-pagination">
      <div class="pagination">
        <el-pagination
          :page-sizes="[20, 30, 40, 50]"
          :page-size="BindForm.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="BindForm.page"
          :total="page.total"
          background
          @current-change="currentChange"
          @size-change="sizeChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { onlineOrderList } from '@/api/order'
import CitySelect from '@/components/CitySelect'

/** 线上订单 */
export default {
  components: { CitySelect },
  data() {
    return {
      isHide: false,
      BindForm: {
        type: null,
        phone: null,
        orderSn: null,
        allCity: true,
        time: null,
        state: '',
        page: 1,
        limit: 20,
        address: {
          province: null,
          city: null,
          village: null
        }
      },
      // 分页
      page: {
        total: 0
      },
      radio3: '',
      Bindata: [],
      loading: false
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.searchLoading()
    },

    sizeChange(e) {
      this.page.pageSize = e
      this.searchLoading()
    },
    currentChange(e) {
      this.page.pageIndex = e
      this.searchLoading()
    },
    changedAddress() {
      const vm = this
      if (vm.BindForm.address.province || vm.BindForm.address.city || vm.BindForm.address.village) {
        vm.BindForm.allCity = false
      } else {
        vm.BindForm.allCity = true
      }
      const provinceId = vm.BindForm.address.province ? vm.BindForm.address.province.code : null
      const cityId = vm.BindForm.address.city ? vm.BindForm.address.city.code : null
      const villageId = vm.BindForm.address.village ? vm.BindForm.address.village.code : null

      vm.$refs.storeSelect.refresh(provinceId, cityId, villageId)
    },
    setWeek() {
      const vm = this
      const start = new Date()
      const end = new Date()
      start.setHours(0)
      start.setMinutes(0)
      start.setSeconds(0)
      end.setHours(23)
      end.setMinutes(59)
      end.setSeconds(59)
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 6)
      vm.BindForm.time = [
        vm.$XEUtils.toDateString(start, 'yyyy-MM-dd HH:mm:ss'),
        vm.$XEUtils.toDateString(end, 'yyyy-MM-dd HH:mm:ss')
      ]
    },
    setMonth() {
      const vm = this
      const start = new Date()
      const end = new Date()
      start.setHours(0)
      start.setMinutes(0)
      start.setSeconds(0)
      end.setHours(23)
      end.setMinutes(59)
      end.setSeconds(59)
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 29)
      vm.BindForm.time = [
        vm.$XEUtils.toDateString(start, 'yyyy-MM-dd HH:mm:ss'),
        vm.$XEUtils.toDateString(end, 'yyyy-MM-dd HH:mm:ss')
      ]
    },
    /** 改变搜索类型*/
    changeType() {
      if (this.BindForm.type == 0) {
        this.BindForm.phone = null
        this.BindForm.orderSn = null
      } else {
        this.BindForm.phone = null
        this.BindForm.orderSn = null
      }
    },
    /** 重置*/
    resetForm() {
      this.BindForm.type = null
      this.BindForm.phone = null
      this.BindForm.orderSn = null
      this.$refs.citySelect.resetFields()
      this.$refs.form.resetFields()
      this.BindForm.time = null
      this.searchLoading()
    },
    /** 搜索 */
    async searchLoading() {
      const data = this.$XEUtils.clone(this.BindForm, true)
      delete data.type
      delete data.allCity
      if (data.time && data.time.length === 2) {
        data['startTime'] = data.time[0]
        data['endTime'] = data.time[1]
      }
      if (data.address.province) {
        console.log(data.address)
        data['province'] = data.address.province.code
      }
      if (data.address.city) {
        data['city'] = data.address.city.code
      }
      delete data.address
      delete data.time
      delete data.store
      this.loading = true
      await onlineOrderList(data).then(inf => {
        this.loading = false
        console.log(inf.data.data)
        this.Bindata = inf.data.data.data
        this.page.total = inf.data.data.total
      }).catch(err => {
        this.loading = false
        console.log(err)
      })
    },
    /** 查看订单详情*/
    showDetail(row) {
      this.$router.push({
        name: 'OnlineDetail',
        query: {
          p: this.$ed({
            rows: row,
            status: row.stat
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.OnlineOrder {
  padding: 20px;
}
.OnlineOrder > .butList {
  margin: 40px 0px;
}
.OnlineOrder > .formArea {
  width: 100%;
  background: #f3f3f3;
  padding: 10px 30px;
  border-radius: 5px;
}
.OnlineOrder > .formArea > .el-area {
  margin: 30px 0px;
}
.OnlineOrder > .formArea > .el-area > span {
  display: inline-block;
  width: 80px;
}
.OnlineOrder > .formArea > .el-area > .ele-input {
  width: 280px;
}

.tableCustom {
  width: 100%;
  border-collapse: collapse;
  tr {
    td {
      border: 1px solid #f3f3f3;
    }
  }
  thead {
    background: #f3f3f3;
    td {
      height: 50px;
      border: none;
    }
    td:first-child {
      width: 30%;
    }
  }
  .ele-tr-top {
    height: 34px;
  }
  tbody {
    .ele-tr-content {
      background: #f3f3f3;
      .ele-td-first {
        div {
          font-size: 13px;
          display: flex;
          justify-content: space-between;
          padding: 0px 4% 0px 1%;
        }
      }
    }
    .for-list {
      td:first-child {
        padding-left: 5%;
        div {
          float: left;
        }
        div:first-child {
          width: 120px;
          height: 120px;
          padding: 15px;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        div:last-child {
          margin: 10px 0px 0px 0px;
          font-size: 13px;
          p:nth-child(2) {
            color: gray;
          }
        }
      }
      .baojia > ul {
        height: 100%;
        padding: 0px;
        list-style-type: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        li {
          padding: 5px 0px;
        }
        .dazhe {
          width: 50%;
          display: flex;
          justify-content: space-around;
        }
        .shuliang {
          font-size: 13px;
          color: gray;
        }
      }
      .ele-td-last {
        text-align: center;
      }
      .ele-td-font {
        color: gray;
      }
    }
  }
}
.foot-pagination {
  width: 100%;
  .pagination {
    float: right;
    padding: 60px 0px 80px 0px;
  }
}
</style>
